<template>
  <section class="section sec-1" id="sec-1">
    <ke-swiper class="swiper" autoplay indicator arrow>
      <template v-for="(item, index) in swiperList" :key="index">
        <ke-swiper-item class="swiper-item">
          <div class="swiper-wrap">
            <img class="bg" :src="item.bg" draggable="false" />
            <div class="mo-lr-box">
              <div class="left">
                <img class="mo-cover" :src="item.bg" draggable="false" />
              </div>
              <div class="right mo-align-center-txt-box">
                <h2 class="mo-title">{{ item.title }}</h2>
                <p class="mo-desc ma-top-30">{{ item.desc }}</p>
                <div class="btns ma-top-30">
                  <button class="mo-btn" @click.stop.prevent="scrollToDom('#sec-3')">{{ item.btn }}</button>
                </div>
              </div>
            </div>
          </div>
        </ke-swiper-item>
      </template>
    </ke-swiper>
  </section>
</template>
<script>
import { scrollToDom } from '../util';

export default {
  name: 'co-section-1',
  data() {
    return {
      swiperList: [
        {
          bg: '/banner-1.jpg',
          title: 'Make The Kitchen\nMore Organized\n让厨房更有序',
          desc: 'Kitchen storage is the art of life',
          btn: 'More',
          btnTarget: 'home',
        },
        {
          bg: '/banner-2.jpg',
          title: 'The Touching\nCreation Of Heart\n创造心的感动',
          desc: 'Carefully select every household item',
          btn: 'More',
          btnTarget: 'kitchen',
        },
        {
          bg: '/banner-3.jpg',
          title: 'Favorite Pet First\nChoice\n爱宠首选',
          desc: 'Care for your pet very well',
          btn: 'More',
          btnTarget: 'pet',
        },
      ],
    };
  },
  methods: {
    scrollToDom,
  },
};
</script>
<style lang="less" scoped>
.sec-1 {
  padding: 0;
  width: 100%;
  height: calc(100vh - 100px);
  max-width: 100%;
  min-height: 700px;
  .swiper {
    height: 100%;
  }

  .swiper-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    // background-color: #000;
    .bg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: blur(30px) brightness(0.8);
      transform: scale(1.2);
      position: absolute;
    }

    .mo-lr-box {
      max-width: 1200px;
      flex-grow: 1;
      z-index: 1;
      margin: 40px auto;
      width: 100%;
      height: calc(100% - 80px);
      background-color: #fff;
      box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);

      .right {
        padding: 60px 90px;
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  .sec-1 {
    height: 100vh;
    .swiper-wrap {
      height: 100%;
      .mo-lr-box {
        margin: 0;
        height: 100%;

        .left,
        .right {
          height: 50%;
          overflow: hidden;
        }

        .right {
          padding: 20px;
        }
      }
    }
  }
}
</style>
